<template>
  <div>
    <el-input :class="select-tree-input"
              :placeholder="placeholder"
              readonly
              ref="input"
              :value="textValue"
              @focus="onFocus"
              clearable
    ></el-input>
    <div class="select-tree-body" v-show="treeShow" transiton="fade" ref="treeBox">
      <el-tree
        highlight-current
        :expand-on-click-node="false"
        @node-click="selectNode"
        :default-expand-all="true"
        :data="treeList"
        :props="props"
        ref="tree"
      ></el-tree>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        treeList: [],
        textValue: '',
        placeholder: '请选择上级节点',
        treeShow: false,
      }
    },
    methods: {
      onFocus: function () {
        this.treeShow = true
      },
      selectNode: function (data, node, array) {
        let textValue = data[this.props.label]
        console.log(textValue)
        this.textValue = textValue
        this.treeShow = false
        this.$emit('input', data[this.props.valueKey])
        this.$emit('select', data)

      },
      getSelectedLabel: function (key, list) {
        for (let row of list) {
          console.log(key + '|' + row[key] + '|' + this.selected)
          if (row[key] == this.selected) {
            console.log(row[this.props.label])
            return row[this.props.label]
          } else if (row.children != undefined && row.children.length > 0) {
            return this.getSelectedLabel(key, row.children)
          }
        }
      },
      updateSelect () {
        let text = ''
        for (let row of this.treeList) {
          if (row[this.props.valueKey] == this.selected) {
            text = row[this.props.label]
            break
          } else if (row.children != undefined && row.children.length > 0) {
            let temp = this.getSelectedLabel(this.props.valueKey, row.children)
            console.log(temp)
            if (temp != undefined) {
              text = temp
              break
            }
          }
        }
        this.textValue = text
      }
    },
    mounted () {
      console.log(this.props)
      this.updateSelect()
    },
    computed: {
      selected: {
        get () {
          console.log(this.value)
          return this.value
        },
        set (val) {
          this.$emit('input', val)
        }
      },
    },
    watch: {
      value (val) {
        this.updateSelect()
      }
    },
    props: {
      placeholder: {
        type: String,
        default: ''
      },
      treeList: {
        type: Array,
        default: []
      },
      value: {
        type: String,
        default: ''
      },
      props: {
        type: Object,
        default: {
        }
      },
    }
  }
</script>
<style scoped>
  .select-tree-input {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .select-tree-body {
    z-index: 9999;
    position: absolute;
    left: 0px;
    top: 35px;
    border: 1px solid #c1c3c4;
    width: 100%;
    height: 200px;
    clear: both;
    overflow-y: scroll;
    margin-top: -2px;
    background: white;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
  }

  .select-tree-body::-webkit-scrollbar {
    width: 0 !important;
  }

  .select-tree-body::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
</style>
